import { Input, NavBar, TextArea } from 'antd-mobile'
import { useHistory } from 'react-router-dom'
import { useEffect, useState } from 'react'
import styles from './EditInput.module.scss'

type Props = {
  // 尝试子传父
  onClose: (value: string, prop: string) => void
  prop: string
  value: string
  onValueSubmit: (value: string, prop: string) => void
}
export const EditInput = (props: Props) => {
  // 将 value 初始化当前组件的状态，为了后续传回父组件
  const [value, setValue] = useState(props.value)
  const history = useHistory()

  // 解决修改简介的方法1 使用useEffect监听 当页面props.value更改时重新赋值value
  // useEffect(() => {
  //   // value 为 null 或 undefined 时，设置为默认值为空字符串
  //   setValue(props.value ?? '')
  // }, [props.value])

  return (
    <div className={styles.root}>
      <NavBar
        // 在子组件内部调用父组件传递的函数
        onBack={() => props.onClose(value, props.prop)} // 关闭时也把状态传回去
        className="navbar"
        right={
          <span
            className="commit-btn"
            onClick={() => props.onValueSubmit(value, props.prop)} // 提交时也把状态传回去
          >
            提交
          </span>
        }>
        编辑{props.prop === 'name' ? '昵称' : '简介'}
      </NavBar>

      <div className="edit-input-content">
        <h3>{props.prop === 'name' ? '昵称' : '简介'}</h3>
        {props.prop === 'name' ? (
          <div className="input-wrap">
            <Input value={value} onChange={setValue} placeholder="请输入" />
          </div>
        ) : (
          <TextArea
            className="textarea"
            value={value ? value : ''}
            onChange={setValue}
            placeholder="请输入"
            maxLength={100}
            rows={4}
            showCount
          />
        )}
      </div>
    </div>
  )
}
